<template>
    <div>
        <p>路由信息-子组件1</p>
        <pre>
        如果组件开发使用的是组合式API规则，可以通过如下两种方案进行信息对象$route的获取
        方案1：
            使用vue提供的当前组件实例代理对象方法 getCurrentInstance() 获取组件实例代理对象;
            通过返回的组件实例代理对象的 proxy 属性获取当前组件实例this;
            通过组件实例对象调用 $route 获取路由激活信息对象
        方案2：
            使用vue-router 提供的组合式API方法 useRoute() 直接加载路由信息对象；
        </pre>
        <input type="button" value="打印当前的路由信息数据" @click="printRouteConfig()">
    </div>
</template>

<!-- <script>
    export default {
        methods: {
            printRouteConfig() {
                console.log( this.$route )
            }
        },
    }
</script> -->
<script setup>
import { getCurrentInstance } from "vue";
import { useRoute } from "vue-router";

const vmProxy = getCurrentInstance();
const $route = useRoute();

const printRouteConfig = function() {
    console.log(vmProxy)
    console.log(vmProxy.proxy)
    console.log( vmProxy.proxy.$route )
    console.log( vmProxy.proxy.$route.path )

    console.log( $route )
    console.log( $route.path )

}

</script>

<style lang="scss" scoped>

</style>